<!-- 柱状图 -->
<style lang="stylus" scoped>
.jinduradar
  height 100%
  background-size 100% 100%
  color white
  .main
    width 100%
    height calc(100% - 100px)
</style>

<template>
<div class="jinduradar">
  <p style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'>吸毒人员滥用毒品种类</p>
  <div class="main"></div>
</div>

</template>
<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  methods: {
    _init() {
      this.myChart = echarts.init(document.querySelector('.jinduradar .main'))
      var glo = this.GLOBAL.BASE_URL;
      this.myChart.on("click", function() {
        $(".table").show();
        $(".table iframe").attr("src", glo + "/a/jindu/jinduMain/vuelist").show();
      })
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.jinduradar .main'))
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/jinduData?name=平顶山市').then((res) => {
    // axios.get('static/data/Datas.json').then((res) => {
      if (res) {
        var arr = [];
        var countarr = [];
        var jindudrname = [];
        $(res.data).each(function() {
          if (this.name === "平顶山市") {
            countarr = this.jindudrugcount.split(",");
          }
        })
        var jindudr = res.data[0]['jindudr'].split(",");
        jindudr.pop();
        $(jindudr).each(function() {
          jindudrname[jindudrname.length] = {"text": this};
        })
      }
      this.myChart.setOption({
        radar: [
          {
            indicator: jindudrname,
            center: ['50%', '50%'],
            radius: 100,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            name: {
              formatter: '【{value}】',
              textStyle: {
                color: '#72ACD1'
              }
            },
            splitArea: {
              areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)', 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)', 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }
        ],
        grid: {
          bottom: 75,
          left: 45,
          right: 45
        },
        series: [
          {
            name: '雷达图',
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              emphasis: {
                // color: 各异,
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                value: countarr,
                name: '图一',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                  normal: {
                    label: {
                      formatter: function (params) {
                        if (params.value > 0) {
                          return params.value + "人";
                        } else {
                          return "";
                        }
                      },
                      show: true
                    }
                  }
                }
              }
            ]
          }
        ]
      });
      this._init()
    });
  }
}
</script>